<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title>
    <meta
      name="description"
      property="og:description"
      content="A simple HTML5 media player with custom controls and WebVTT captions."
    />
    <meta name="author" content="Sam Potts" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Icons -->
    <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico" />
    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16" />
    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png" />

    <!-- Open Graph -->
    <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player" />
    <meta property="og:site_name" content="Plyr" />
    <meta property="og:url" content="https://plyr.io" />
    <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@sam_potts" />
    <meta name="twitter:creator" content="@sam_potts" />
    <meta name="twitter:card" content="summary_large_image" />

    <!-- Docs styles -->
    <link rel="stylesheet" href="dist/demo.css" />

    <!-- Preload -->
    <link
      rel="preload"
      as="font"
      crossorigin
      type="font/woff2"
      href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2"
    />
    <link
      rel="preload"
      as="font"
      crossorigin
      type="font/woff2"
      href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2"
    />
  </head>

  <body>
    <div class="grid">
      <header>
        <h1>Pl<span>a</span>y<span>e</span>r</h1>
        <p>
          A simple, accessible and customisable media player for
          <button type="button" class="link" data-source="video">
            <svg class="icon">
              <title>HTML5</title>
              <path
                d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
              ></path>
            </svg>
            Video</button
          >,
          <button type="button" class="link" data-source="audio">
            <svg class="icon">
              <title>HTML5</title>
              <path
                d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
              ></path>
            </svg>
            Audio</button
          >,
          <button type="button" class="link" data-source="mux">
            <svg class="icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M16 0H0V16H16V0ZM11.4398 2.43862C11.8687 2.00974 12.5138 1.88158 13.0742 2.11366C13.6346 2.34574 14.0001 2.8927 14.0001 3.49918V12.4997C14.0001 13.3279 13.3286 13.9995 12.5004 13.9995C11.6722 13.9995 11.0007 13.3279 11.0007 12.4997V7.11959L9.06054 9.05976C8.47495 9.64536 7.52529 9.64536 6.9397 9.05976L4.99958 7.11959V12.4997C4.99958 13.3279 4.32807 13.9995 3.49985 13.9995C2.67162 13.9995 2.00012 13.3279 2.00012 12.4997V3.49918C2.00012 2.89246 2.36539 2.34574 2.92578 2.11366C3.48617 1.88158 4.13127 2.00974 4.56015 2.43862L8 5.87855L11.4398 2.43862ZM11.7564 12.4999C11.7564 12.9108 12.0895 13.2439 12.5004 13.2439C12.9113 13.2439 13.2444 12.9108 13.2444 12.4999C13.2444 12.089 12.9113 11.7559 12.5004 11.7559C12.0895 11.7559 11.7564 12.089 11.7564 12.4999Z"
                fill="#00b2ff"
              />
            </svg>
            Mux</button
          >,
          <button type="button" class="link" data-source="youtube">
            <svg class="icon" role="presentation">
              <title>YouTube</title>
              <path
                d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
                    M6,11V5l5,3L6,11z"
              ></path>
            </svg>
            YouTube
          </button>
          and
          <button type="button" class="link" data-source="vimeo">
            <svg class="icon" role="presentation">
              <title>Vimeo</title>
              <path
                d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
                       C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
                       c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"
              ></path>
            </svg>
            Vimeo
          </button>
        </p>

        <div class="call-to-action">
          <a href="https://github.com/sampotts/plyr" target="_blank" class="button js-shr">
            <svg class="icon" role="presentation">
              <title>GitHub</title>
              <path
                d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
               C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
               c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
               c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
               c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
               c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"
              ></path>
            </svg>
            Download on GitHub
          </a>
          <div class="cta-mux">Looking for video hosting? Check out <a href="https://mux.com?ref=plyr">Mux</a>.</div>
        </div>
      </header>
      <main>
        <div id="container">
          <video
            controls
            crossorigin
            playsinline
            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
            id="player"
          >
            <!-- Video files -->
            <source
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
              type="video/mp4"
              size="576"
            />
            <source
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
              type="video/mp4"
              size="720"
            />
            <source
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
              type="video/mp4"
              size="1080"
            />

            <!-- Caption files -->
            <track
              kind="captions"
              label="English"
              srclang="en"
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
              default
            />
            <track
              kind="captions"
              label="Français"
              srclang="fr"
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
            />

            <!-- Fallback for browsers that don't support the <video> element -->
            <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
          </video>
          <video
            controls
            crossorigin
            playsinline
            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
            id="player-hls"
            hidden
          ></video>
        </div>

        <ul>
          <li class="plyr__cite plyr__cite--video" hidden>
            <small>
              <svg class="icon">
                <title>HTML5</title>
                <path
                  d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
                ></path>
              </svg>
              <a
                href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
                target="_blank"
                class="link"
                >View From A Blue Moon</a
              >
              <span>&copy; Brainfarm</span>
            </small>
          </li>
          <li class="plyr__cite plyr__cite--audio" hidden>
            <small>
              <svg class="icon" title="HTML5">
                <title>HTML5</title>
                <path
                  d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
                ></path>
              </svg>
              <a href="http://www.kishibashi.com/" target="_blank" class="link"
                >Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a
              >
              <span>&copy; Kishi Bashi</span>
            </small>
          </li>
          <li class="plyr__cite plyr__cite--mux" hidden>
            <small>
              <a
                href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
                target="_blank"
                class="link"
                >View From A Blue Moon</a
              >
              <span>&copy; Brainfarm</span>
              <span>on</span>
              <svg
                class="icon"
                role="presentation"
                viewBox="0 0 1600 500"
                style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
              >
                <title>Mux</title>
                <path
                  d="M994.287,93.486c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m0,-93.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,68.943 -56.09,125.033 -125.032,125.033c-68.942,-0 -125.03,-56.09 -125.03,-125.033l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,137.853 112.149,250.003 249.999,250.003c137.851,-0 250.001,-112.15 250.001,-250.003l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486"
                  style="fill-rule: nonzero"
                />
                <path
                  d="M1537.51,468.511c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m-275.883,-218.509l-143.33,143.329c-24.402,24.402 -24.402,63.966 0,88.368c24.402,24.402 63.967,24.402 88.369,-0l143.33,-143.329l143.328,143.329c24.402,24.4 63.967,24.402 88.369,-0c24.403,-24.402 24.403,-63.966 0.001,-88.368l-143.33,-143.329l0.001,-0.004l143.329,-143.329c24.402,-24.402 24.402,-63.965 0,-88.367c-24.402,-24.402 -63.967,-24.402 -88.369,-0l-143.329,143.328l-143.329,-143.328c-24.402,-24.401 -63.967,-24.402 -88.369,-0c-24.402,24.402 -24.402,63.965 0,88.367l143.329,143.329l0,0.004Z"
                  style="fill-rule: nonzero"
                />
                <path
                  d="M437.511,468.521c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m23.915,-463.762c-23.348,-9.672 -50.226,-4.327 -68.096,13.544l-143.331,143.329l-143.33,-143.329c-17.871,-17.871 -44.747,-23.216 -68.096,-13.544c-23.349,9.671 -38.574,32.455 -38.574,57.729l0,375.026c0,34.51 27.977,62.486 62.487,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-224.173l80.843,80.844c24.404,24.402 63.965,24.402 88.369,-0l80.843,-80.844l0,224.173c0,34.51 27.976,62.486 62.486,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-375.026c0,-25.274 -15.224,-48.058 -38.573,-57.729"
                  style="fill-rule: nonzero"
                />
              </svg>
            </small>
          </li>
          <li class="plyr__cite plyr__cite--youtube" hidden>
            <small>
              <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank" class="link"
                >View From A Blue Moon</a
              >
              on&nbsp;
              <span class="color--youtube">
                <svg class="icon" role="presentation">
                  <title>YouTube</title>
                  <path
                    d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
                                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
                                    M6,11V5l5,3L6,11z"
                  ></path>
                </svg>
                YouTube
              </span>
            </small>
          </li>
          <li class="plyr__cite plyr__cite--vimeo" hidden>
            <small>
              <a href="https://vimeo.com/40648169" target="_blank" class="link">Toob “Wavaphon” Music Video</a>
              on&nbsp;
              <span class="color--vimeo">
                <svg class="icon" role="presentation">
                  <title>Vimeo</title>
                  <path
                    d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
                               C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
                               c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"
                  ></path>
                </svg>
                Vimeo
              </span>
            </small>
          </li>
        </ul>
      </main>
    </div>

    <aside>
      <svg class="icon">
        <title>X</title>
        <path
          d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
       C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
       c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
       c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"
        ></path>
      </svg>
      <p>
        If you think Plyr's good,
        <a
          href="https://x.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
          target="_blank"
          class="link js-shr"
          >post it on X</a
        >
        👍
      </p>
    </aside>

    <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
    <script src="dist/demo.js" crossorigin="anonymous"></script>
  </body>
</html>
